<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
    #set($start = '${')
    <title th:text="${start}sysConfig.get('title')+' | ${clazzVO.remarks}列表'}"></title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />

    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
    <link href="/assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
    <link href="/assets/plugins/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/assets/plugins/font-awesome/5.0/css/fontawesome-all.min.css" rel="stylesheet" />
    <link href="/assets/plugins/animate/animate.min.css" rel="stylesheet" />
    <link href="/assets/css/default/style.min.css" rel="stylesheet" />
    <link href="/assets/css/default/style-responsive.min.css" rel="stylesheet" />
    <link href="/assets/css/default/theme/default.css" rel="stylesheet" id="theme" />
    <!-- ================== END BASE CSS STYLE ================== -->

    <!-- ================== BEGIN BASE JS ================== -->
    <script src="/assets/plugins/pace/pace.min.js"></script>
    <!-- ================== END BASE JS ================== -->
</head>
<body>
<!-- begin #page-loader -->
<div id="page-loader" class="fade show"><span class="spinner"></span></div>
<!-- end #page-loader -->

<!-- begin #page-container -->
<div id="page-container" class="fade page-sidebar-fixed page-header-fixed">
    <!-- begin #header -->
    <div th:replace="/common/header :: header">

    </div>
    <!-- end #header -->

    <!-- begin #sidebar -->
    <div th:replace="/common/sidebar :: sidebar">

    </div>
    <div class="sidebar-bg"></div>
    <!-- end #sidebar -->

    <!-- begin #content -->
    <div id="content" class="content">
        <!-- begin breadcrumb -->
        <ol class="breadcrumb pull-right">
            <li class="breadcrumb-item"><a href="javascript:;">主页</a></li>
            <li class="breadcrumb-item"><a href="javascript:;">系统设置</a></li>
            <li class="breadcrumb-item active">${clazzVO.remarks}列表</li>
        </ol>
        <!-- end breadcrumb -->
        <!-- begin page-header -->
        <h1 class="page-header">${clazzVO.remarks}列表</h1>
        <!-- end page-header -->

        <!-- begin row -->
        <div class="row">

            <!-- begin col-6 -->
            <div class="col-lg-12">
                <!-- begin panel -->
                <div class="panel panel-inverse" data-sortable-id="table-basic-7">
                    <!-- begin panel-heading -->
                    <div class="panel-heading">
                        <div class="panel-heading-btn">
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                        </div>
                        <h4 class="panel-title">${clazzVO.remarks} </h4>
                    </div>
                    <!-- end panel-heading -->
                    <!-- begin panel-body -->
                    <div class="panel-body">

                        <form class="form-inline" action="/" method="POST" id="theForm">
                            <div class="form-group m-r-10">
                                <input type="text" name="id" class="form-control" th:value="${start}modelPageRequest!=null and modelPageRequest.id!=null?modelPageRequest.id:''}" placeholder="输入${clazzVO.remarks}ID值" />
                            </div>

                            <button type="button" class="btn btn-primary m-r-5" onclick="searchTheForm()">搜索</button>
                            <button type="button" class="btn btn-purple m-r-5" onclick="resetTheForm()">重置</button>
                            <button type="button" class="btn btn-danger m-r-5" onclick="del()">删除</button>
                            <button type="button" class="btn btn-inverse m-r-5" onclick="add()">新增</button>
                        </form>
                        <p/>
                        <div class="note note-secondary m-b-15">
                            <h4><b>${clazzVO.remarks}注意事项</b></h4>
                            <p>
                                <h6>1、${notice1} </h6>
                                <h6>2、${notice2} </h6>
                                <h6>3、${notice3}</h6>
                            </p>
                        </div>

                        <!-- begin table-responsive -->
                        <div class="table-responsive">
                            <!-- table-striped -->
                            <table class="table table-bordered m-b-0">
                                <thead>
                                <tr>
                                <th>
                                    <div class="checkbox checkbox-css">
                                        <input type="checkbox" id="selectAll" onclick="selectAll()" />
                                        <label for="selectAll">全选</label>
                                    </div>
                                </th>
                                #foreach($field in ${fieldVOS})
                                <th>${field.comments}</th>
                                #end
                                    <th width="1%">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="obj:${start}iPage.records}">
                                    <td class="with-img">
                                        <div class="checkbox checkbox-css">
                                            <input type="checkbox" th:id="'id_'+${start}obj.id}"  th:value="${start}obj.id}"/>
                                            <label th:for="'id_'+${start}obj.id}"></label>
                                        </div>
                                    </td>
                                    #foreach($field in ${fieldVOS})
                                    #if(${field.fieldName} == "addTime")
                                    <td th:text="${start}#ctx.#dates.format(obj.addTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                                    #else
                                    <td th:text="${start}obj.${field.fieldName}}"></td>
                                    #end
                                    #end

                                    <td class="with-btn" nowrap>
                                        <a href="javascript:void(0);" class="btn btn-sm btn-primary width-60 m-r-2" th:onclick="add([[${start}obj.id}]])">Edit</a>
                                        <a href="javascript:void(0);" class="btn btn-sm btn-white width-60" th:onclick="del([[${start}obj.id}]])">Delete</a>
                                    </td>
                                </tr>

                                </tbody>
                                <tfoot>
                                    <tr>
                                        #set($colspan = $fieldVOS.size() + 2)
                                        <td colspan="${colspan}" th:insert="/common/pagination :: pagination">

                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <!-- end table-responsive -->
                    </div>
                    <!-- end panel-body -->

                </div>
                <!-- end panel -->


            </div>
            <!-- end col-6 -->
        </div>
        <!-- end row -->
    </div>
    <!-- end #content -->

    <!-- begin theme-panel -->
    <div th:replace="/common/theme :: theme">

    </div>
    <!-- end theme-panel -->

    <!-- begin scroll to top btn -->
    <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
    <!-- end scroll to top btn -->
</div>
<!-- end page container -->

<!-- ================== BEGIN BASE JS ================== -->
<script src="/assets/plugins/jquery/jquery-3.2.1.min.js"></script>
<script src="/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="/assets/plugins/bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
<!--[if lt IE 9]>
<script src="/assets/crossbrowserjs/html5shiv.js"></script>
<script src="/assets/crossbrowserjs/respond.min.js"></script>
<script src="/assets/crossbrowserjs/excanvas.min.js"></script>
<![endif]-->
<script src="/assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/assets/plugins/js-cookie/js.cookie.js"></script>
<script src="/assets/js/theme/default.min.js"></script>
<script src="/assets/js/apps.min.js"></script>
<!-- ================== END BASE JS ================== -->

<!-- ================== BEGIN PAGE LEVEL JS ================== -->
<script src="/assets/plugins/highlight/highlight.common.js"></script>
<script src="/assets/js/demo/render.highlight.js"></script>
<!-- ================== END PAGE LEVEL JS ================== -->
<script>
    #set( $simpleClazzName = ${clazzName.substring(0, 1).toLowerCase()}+${clazzName.substring(1)})

    function goTo(){
        let current = arguments[0]
        window.location.href='/${simpleClazzName}/list?current='+current
    }

    function selectAll(){
        $('[id^=id_]').prop('checked',$('#selectAll').prop('checked'))
    }

    function del(){
        let data = []

        let id = arguments[0]
        if(id != undefined){
            data.push(id)
        }

        $('[id^=id_]:checked').each(function(index,domEle,c){
            data.push(domEle.value)
        })

        $.ajax({
            url: "/${simpleClazzName}/del",
            type:'post',
            data: JSON.stringify(data),
            dataType:'json',
            contentType:'application/json',
            success: function(result){
                window.location.href='/${simpleClazzName}/list'
            }
        });

    }

    function searchTheForm(){
        let param = $("#theForm").serialize()
        window.location.href='/${simpleClazzName}/list?'+param
    }

    function resetTheForm(){
        //1、input的value=''清空
        $('input').each(function(){ this.value='' })
    }

    function add(){
        let id = arguments[0]
        console.log(id)
        if(id === undefined){
            window.location.href='/${simpleClazzName}/add'
        }else{
            window.location.href='/${simpleClazzName}/add?id='+id
        }
    }

    $(document).ready(function() {
        App.init();
        Highlight.init();
    });
</script>
</body>
</html>
